﻿@model dynamic

@{
    ViewBag.Title = "站点收支统计图标";
    Layout = "~/Views/Shared/_Index.cshtml";
}
<script src="@SiteUrl.GetStaticResourceScriptUrl("~/js/charts/Chart.js")"></script>
<script src="~/Content/js/highcharts/highcharts.js"></script>
<form id="form1">
    <div class="panel panel-default">
        <div class="panel-heading">
            收支比例
        </div>
        <div style="padding-right:10px;">
            <table class="form">
                <tr>
                    <th class="formTitle">统计时间：</th>
                    <td class="formValue formDdlSelectorTd">
                        <select id="ddlRKFS" class="form-control required">
                            <option value="1">2018-09-01 ~ 2018-09-26</option>
                            <option value="2">2018-08-01 ~ 2018-08-31</option>
                            <option value="3">2018-07-01 ~ 2018-07-26</option>
                            <option value="4">2018-06-01 ~ 2018-06-30</option>
                        </select>
                    </td>
                    <th class="formTitle">站点：</th>
                    <td class="formValue formDdlSelectorTd">
                        <select id="site1" name="site" class="form-control">
                            <option value="1">秦皇岛养老院</option>
                            <option value="2">嘉兴康复</option>
                            <option value="3">上海百诺</option>
                            <option value="4">常熟美迪柯医院</option>
                            <option value="5">广州松鹤养老院</option>
                        </select>
                    </td>
                    <td colspan="2"></td>
                </tr>
            </table>
            <div style="width:100%;height:400px;">
                <div id="sszb" style="height: 400px; max-width: 600px; margin: 0 auto;float: left;width:40%;"></div>
                <div id="srzb" style="height: 400px; float: left;width:60%;"></div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            年度收入统计
        </div>
        <div style="padding-right:10px;">
            <table class="form">
                <tr>
                    <th class="formTitle">站点：</th>
                    <td class="formValue formDdlSelectorTd">
                        <select id="site2" name="site" class="form-control">
                            <option value="1">秦皇岛养老院</option>
                            <option value="2">嘉兴康复</option>
                            <option value="3">上海百诺</option>
                            <option value="4">常熟美迪柯医院</option>
                            <option value="5">广州松鹤养老院</option>
                        </select>
                    </td>
                    <td colspan="4"></td>
                </tr>
            </table>
            <div style="width: 100%;">
                <div id="ndsrtj" style="height: 400px;width:100%;"></div>
                <div id="gzdndsrtj" style="height: 400px; width: 100%;"></div>
            </div>
        </div>
    </div>
</form>
<script>
    $(document).ready(function () {

    });

    Highcharts.chart('sszb', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: '实收占比'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            name: '实收',
            colorByPoint: true,
            data: [{
                name: '机构实收',
                y: 40.0
            }, {
                name: 'GRS实收',
                y: 60.0
            }]
        }]
    });
    Highcharts.chart('srzb', {
        chart: {
            type: 'bar'
        },
        title: {
            text: '收入统计'
        },
        xAxis: {
            categories: ['PT', 'OT', 'ST', 'TCM']
        },
        yAxis: {
            min: 0,
            title: {
                text: '科目收费金额'
            }
        },
        legend: {
            /* 图例显示顺序反转
             * 这是因为堆叠的顺序默认是反转的，可以设置
             * yAxis.reversedStacks = false 来达到类似的效果
             */
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: '门诊收入',
            data: [1120.00, 3776.76, 4655.99, 7476.12]
        }, {
            name: '住院收入',
            data: [2123.11, 21234.34, 3235.56, 14563.12]
        }],
        credits: {
            enabled: false
        }
    });
    Highcharts.chart('ndsrtj', {
        chart: {
            type: 'column'
        },
        credits: {
            enabled: false
        },
        title: {
            text: '本年度收费金额统计'
        },
        //subtitle: {
        //    text: '数据来源: newtouch.com'
        //},
        xAxis: {
            categories: [
                '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月'
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: '科目收费金额 (元)'
            }
        },
        tooltip: {
            // head + 每个 point + footer 拼接成完整的 table
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                borderWidth: 0
            }
        },
        series: [{
            name: '门诊收入',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]
        }, {
            name: '住院收入',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 92.3]
        }]
    });
    Highcharts.chart('gzdndsrtj', {
        chart: {
            type: 'spline'
        },
        title: {
            text: '各站点本年度收费金额统计'
        },
        //subtitle: {
        //    text: '非规律性时间内的变化'
        //},
        credits: {
            enabled: false
        },
        xAxis: {
            type: 'datetime',
            title: {
                text: null
            }
        },
        yAxis: {
            title: {
                text: '科目收费金额 (元)'
            },
            min: 0
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x:%e. %b}: {point.y:.2f} 元'
        },
        plotOptions: {
            spline: {
                marker: {
                    enabled: true
                }
            }
        },
        series: [{
            name: '秦皇岛养老院',
            // Define the data points. All series have a dummy year
            // of 2018/71 in order to be compared on the same x axis. Note
            // that in JavaScript, months start at 0 for January, 1 for February etc.
            data: [
                [Date.UTC(2018, 1, 7), 12],
                [Date.UTC(2018, 1, 10), 22.6],
                [Date.UTC(2018, 1, 18),33.7],
                [Date.UTC(2018, 2, 2), 23.8],
                [Date.UTC(2018, 2, 19), 12.6],
                [Date.UTC(2018, 3, 16), 56.6],
                [Date.UTC(2018, 3, 28), 78.67],
                [Date.UTC(2018, 4, 1), 56.81],
                [Date.UTC(2018, 4, 8), 99.78],
                [Date.UTC(2018, 4, 12), 121.98],
                [Date.UTC(2018, 5, 27), 122.84],
                [Date.UTC(2018, 6, 10), 18.80],
                [Date.UTC(2018, 6, 18), 41.80],
                [Date.UTC(2018, 6, 24), 15.92],
                [Date.UTC(2018, 7, 4), 26.49],
                [Date.UTC(2018, 7, 11), 27.79],
                [Date.UTC(2018, 7, 15), 82.73],
                [Date.UTC(2018, 7, 25), 29.61],
                [Date.UTC(2018, 8, 2), 21.76],
                [Date.UTC(2018, 8, 6), 112.82],
                [Date.UTC(2018, 8, 13), 122.8],
                [Date.UTC(2018, 9, 3), 26.1],
                [Date.UTC(2018, 9, 6), 91.1],
                [Date.UTC(2018, 9, 9), 12.25],
                [Date.UTC(2018, 9, 12), 87]
            ]
        }, {
            name: '嘉兴康复',
            data: [
                [Date.UTC(2018, 1, 18), 120],
                [Date.UTC(2018, 1, 26), 90.2],
                [Date.UTC(2018, 2, 1), 70.47],
                [Date.UTC(2018, 2, 11), 80.55],
                [Date.UTC(2018, 2, 25), 71.38],
                [Date.UTC(2018, 3, 8), 81.38],
                [Date.UTC(2018, 3, 15), 51.38],
                [Date.UTC(2018, 4, 1), 21.38],
                [Date.UTC(2018, 4, 8), 11.48],
                [Date.UTC(2018, 5, 21), 21.5],
                [Date.UTC(2018, 6, 12), 112.89],
                [Date.UTC(2018, 6, 25), 23.0],
                [Date.UTC(2018, 7, 4), 81.94],
                [Date.UTC(2018, 7, 9), 91.91],
                [Date.UTC(2018, 8, 13), 71.75],
                [Date.UTC(2018, 8, 19), 61.6],
                [Date.UTC(2018, 8, 25), 110.6],
                [Date.UTC(2018, 8, 31), 20.35],
                [Date.UTC(2018, 9, 7), 12]
            ]
        }, {
            name: '上海百诺',
            data: [
                [Date.UTC(2018, 1, 9), 90],
                [Date.UTC(2018, 1, 14), 50.15],
                [Date.UTC(2018, 2, 28), 60.35],
                [Date.UTC(2018, 3, 12), 70.46],
                [Date.UTC(2018, 4, 1), 90.59],
                [Date.UTC(2018, 4, 24), 20.58],
                [Date.UTC(2018, 5, 1), 90.62],
                [Date.UTC(2018, 5, 7), 80.65],
                [Date.UTC(2018, 5, 23), 70.77],
                [Date.UTC(2018, 6, 8), 60.77],
                [Date.UTC(2018, 6, 14), 80.79],
                [Date.UTC(2018, 6, 24), 90.86],
                [Date.UTC(2018, 7, 4), 60.8],
                [Date.UTC(2018, 7, 18), 50.94],
                [Date.UTC(2018, 8, 24), 40.9],
                [Date.UTC(2018, 9, 16), 50.39],
                [Date.UTC(2018, 9, 21), 70]
            ]
        }, {
                name: '常熟美迪柯医院',
            data: [
                [Date.UTC(2018, 1, 9), 110],
                [Date.UTC(2018, 1, 14), 120.15],
                [Date.UTC(2018, 2, 28), 150.35],
                [Date.UTC(2018, 3, 12), 150.46],
                [Date.UTC(2018, 4, 1), 110.59],
                [Date.UTC(2018, 4, 24), 90.58],
                [Date.UTC(2018, 5, 1), 70.62],
                [Date.UTC(2018, 5, 7), 80.65],
                [Date.UTC(2018, 5, 23), 80.77],
                [Date.UTC(2018, 6, 8), 70.77],
                [Date.UTC(2018, 6, 14), 80.79],
                [Date.UTC(2018, 6, 24), 70.86],
                [Date.UTC(2018, 7, 4), 80.8],
                [Date.UTC(2018, 7, 18), 70.94],
                [Date.UTC(2018, 8, 24), 60.9],
                [Date.UTC(2018, 9, 16), 90.39],
                [Date.UTC(2018, 9, 21), 70]
            ]
        }, {
                name: '广州松鹤养老院',
            data: [
                [Date.UTC(2018, 1, 9), 110],
                [Date.UTC(2018, 1, 14), 100.15],
                [Date.UTC(2018, 2, 28), 90.35],
                [Date.UTC(2018, 3, 12), 80.46],
                [Date.UTC(2018, 4, 1), 70.59],
                [Date.UTC(2018, 4, 24), 60.58],
                [Date.UTC(2018, 5, 1), 80.62],
                [Date.UTC(2018, 5, 7), 90.65],
                [Date.UTC(2018, 5, 23), 80.77],
                [Date.UTC(2018, 6, 8), 90.77],
                [Date.UTC(2018, 7, 14), 80.79],
                [Date.UTC(2018, 7, 24), 100.86],
                [Date.UTC(2018, 8, 4), 110.8],
                [Date.UTC(2018, 8, 18), 90.94],
                [Date.UTC(2018, 9, 4), 80.9],
                [Date.UTC(2018, 9, 16), 70.39],
                [Date.UTC(2018, 9, 21), 90]
            ]
        }]
    });

</script>